<template>
  <div class="StaffMon">
    <div class="threeBarChart" :id="id"></div>
  </div>
</template>

<script>
// 中文排序
import pySort from '../../components/PYSort'
// 数组里相同对象键的值相加
import Exhibition from '../../components/Exhibition'
// 根据对象指定键名合并到一个数组
import SortArr from '../../components/SortArr.js'
export default {
  name: 'StaffMon',
  data () {
    return {
      id: 'main',
      staffColor: true,
      dataLists: [],
      dataListName: [],
      objArry: [],
      month: {
        January: 0,
        February: 0,
        March: 0,
        April: 0,
        May: 0,
        June: 0,
        July: 0,
        August: 0,
        September: 0,
        October: 0,
        November: 0,
        December: 0,
        name: ''
      },
      objAllData: [],
      objEnd: []
    }
  },
  methods: {
    async dataList () {
      const { data: res } = await this.$http.get('busiList')
      this.dataLists = res.data
      this.echartsData()
      this.myChart()
    },
    async echartsData () {
      const dataListStaff = this.dataLists.map(item => item.staff_business)
      // this.dataListName = pySort([...new Set(dataListStaff)])
      const ertName = pySort([...new Set(dataListStaff)])
      const ert = ertName.map(item => item.list)
      for (const i in ert) {
        this.dataListName.push(ert[i][0])
      }
      const listName = JSON.parse(JSON.stringify(this.dataListName))
      const listData = JSON.parse(JSON.stringify(this.dataLists))
      for (let i = 0; i < listName.length; i++) {
        for (let j = 0; j < listData.length; j++) {
          // eslint-disable-next-line eqeqeq
          if (listData[j].staff_business == listName[i]) {
            const numDate = Number(listData[j].data_business.substring(5, 7))
            const numNum = Number(listData[j].money_business)
            if (numDate === 1) {
              this.month.January += numNum
            } else if (numDate === 2) {
              this.month.February += numNum
            } else if (numDate === 3) {
              this.month.March += numNum
            } else if (numDate === 4) {
              this.month.April += numNum
            } else if (numDate === 5) {
              this.month.May += numNum
            } else if (numDate === 6) {
              this.month.June += numNum
            } else if (numDate === 7) {
              this.month.July += numNum
            } else if (numDate === 8) {
              this.month.August += numNum
            } else if (numDate === 9) {
              this.month.September += numNum
            } else if (numDate === 10) {
              this.month.October += numNum
            } else if (numDate === 11) {
              this.month.November += numNum
            } else {
              this.month.December += numNum
            }
            this.month.name = listData[j].staff_business
            this.objArry.push(this.month)
            this.month = {
              January: 0,
              February: 0,
              March: 0,
              April: 0,
              May: 0,
              June: 0,
              July: 0,
              August: 0,
              September: 0,
              October: 0,
              November: 0,
              December: 0
            }
          }
        }
      }
      const sortArr = SortArr(this.objArry, 'name')
      const objAll = []
      // 哪些值需要合并
      const mergeKey = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
      sortArr.forEach(item => {
        Exhibition(item, 'name', mergeKey).forEach(v => objAll.push(v))
      })
      objAll.forEach(v => {
        this.objAllData.push(Object.values(v))
      })
      JSON.parse(JSON.stringify(this.objAllData)).forEach(v => {
        const tter = {
          name: '',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          }
        }
        tter.name = v[0]
        v.shift()
        tter.data = v
        this.objEnd.push(tter)
      })
    },
    myChart () {
      const qqw = JSON.parse(JSON.stringify(this.dataListName))
      const qqwData = JSON.parse(JSON.stringify(this.objEnd))
      // 获取节点
      const myChart = this.$echarts.init(document.getElementById(this.id))
      // 获取到当前容器的的宽高而后赋值加载至图列节点中从而达到自适应容器大小
      myChart.resize(
        {
          width: document.getElementById(this.id).offsetWidth,
          height: document.getElementById(this.id).offsetHeight
        }
      )
      // 配置项
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: qqw
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value'
        },
        series: qqwData
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  },
  mounted () {

  },
  created () {
    this.bus.$emit('staffColor', this.staffColor)
    this.dataList()
  }
}
</script>

<style scoped lang='scss'>
.threeBarChart {
  height: calc(100vh - 200px);
}
</style>
